<template>
    <AuthLayout>
      <div class="login-wrapper">
        <el-card class="login-card" shadow="always">
          <h2 class="login-title">欢迎登录</h2>
          <el-form :model="loginForm" label-width="100px" class="login-form">
            <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                class="login-input"
                autofocus
              ></el-input>
            </el-form-item>
  
            <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                class="login-input"
              ></el-input>
            </el-form-item>
  
            <el-form-item class="form-actions">
              <el-button type="primary" class="login-btn" @click="login">登录</el-button>
              <el-button class="register-btn" @click="goRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </AuthLayout>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import AuthLayout from '@/layouts/AuthLayout.vue';
  
  const loginForm = ref({
    username: '',
    password: ''
  });
  
  const router = useRouter();
  
  const login = () => {
    if (!loginForm.value.username || !loginForm.value.password) {
      ElMessage.error('请填写完整的用户名和密码');
      return;
    }
  
    ElMessage.success('登录成功');
    router.push({ name: 'HomePage' });
  };
  
  const goRegister = () => {
    router.push({ name: 'RegisterPage' });
  };
  </script>
  
  <style scoped>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* 防止出现滚动条 */
  }
  
  .login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 满屏高度 */
    width: 100%; /* 满屏宽度 */
    background-image: url('../assets/bg2.jpg'); /* 添加背景图片 */
    background-size: cover; /* 背景图片自适应 */
    background-position: center; /* 居中显示背景 */
    background-repeat: no-repeat; /* 防止背景重复 */
  }
  
  .login-card {
    width: 100%;
    max-width: 400px; /* 最大宽度为400px，适应手机端和桌面端 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    background-color: rgba(255, 255, 255, 0.5); /* 背景色带透明度 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333; /* 标题颜色 */
    font-size: 24px; /* 标题大小 */
  }
  
  .login-input {
    background-color: rgba(255, 255, 255, 0.6); /* 输入框背景带有透明度 */
  }
  
  .form-actions {
    display: flex;
    justify-content: space-between;
  }
  </style>